import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import myaxios from "../../untils/myaxios"
import { NavBar, Carousel, Flex } from 'antd-mobile';
import "./Index.scss"
import SearchInput from "../searchInput/SearchInput"

class Index extends Component {
    state = {
        swiperList: [],
        catitems: [],
        productList: []
    }
    componentDidMount() {
        // 首页轮播图
        myaxios.get("home/swiperdata")
            .then(res => {
                this.setState({
                    swiperList: res,
                })
            });
        // 首页导航图
        myaxios.get("home/catitems")
            .then(res => {
                this.setState({
                    catitems: res
                })
            });
        // 商品列表图片
        myaxios.get("home/floordata").then(res => {
            this.setState({
                productList: res
            })
        })
    }
   
    // 轮播图点击
    handleSwiperClick = (goods_id) => {
        this.props.history.push("/goodDetail" + goods_id)
    }
    // 点击分类导航
    handelClickCate = (params) => {
        this.props.history.push("/category");
    }
    // 点击商品图片
    handelImgClick=(e) => {
        let query=e.target.getAttribute("alt");
        this.props.history.push("/goodList/"+query);
    }

    render() {
        return (
            <div className="wx-index">
                {/* 首页头部开始 */}
                <div className="wx-index-head">
                    <NavBar className="index-nav-head">云购商城</NavBar>
                </div>
                {/* 首页头部结束 */}
                {/* 搜索框开始 */}
                <SearchInput></SearchInput>
                {/* 搜索框结束 */}
                {/* 轮播图开始 */}
                <div className="wx-index-swiper">
                    <Carousel autoplay={true} infinite>
                        {this.state.swiperList.map(val => (
                            <div
                                key={val.goods_id}
                                style={{ display: 'inline-block', width: '100%' }}
                                onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                            >
                                <img
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        window.dispatchEvent(new Event('resize'));
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>
                </div>
                {/* 轮播图结束 */}
                {/* 导航列表开始 */}
                <div className="wx-index-navs">
                    <Flex>
                        {this.state.catitems.map(res => {
                            return <Flex.Item className="index-navs-item"
                                key={res.image_src}
                                onClick={this.handelClickCate}>
                                <img src={res.image_src} alt="" />
                            </Flex.Item>
                        })}
                    </Flex>
                </div>
                {/* 导航列表结束 */}
                {/*商品列表开始 */}
                <div className="wx-index-productData">
                    {this.state.productList.map(v => {
                        return <div className="index-productData-item" key={v.floor_title.image_src}>
                            {/* 标题开始 */}
                            <div className="productData-item-title">
                                <img src={v.floor_title.image_src} alt="" />
                            </div>
                            {/* 标题结束 */}
                            {/* 商品列表开始 */}
                            <div className="product-image-list">
                            {v.product_list.map(vv => {
                                return <div className="productData-item-imgs"  key={vv.image_src} onClick={this.handelImgClick}> 
                                    <img src={vv.image_src} alt={vv.name}  />
                                </div>
                            })}
                            </div>
                            {/* 商品列表结束 */}
                        </div>
                    })}

                </div>
                {/*商品列表结束 */}
            </div>
        );
    }
}

export default withRouter(Index);
